<template>
	<div>
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>交易管理</el-breadcrumb-item>
			<el-breadcrumb-item>借款交易管理</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card>
			<el-row :gutter="20">
				<el-col :span="3">
					<el-input v-model="custId" placeholder="手机号/userid"></el-input>
				</el-col>
				<!-- <el-col :span="3">
					<el-input v-model="seachlist.loanNo" placeholder="借据号"></el-input>
				</el-col> -->
				
				<el-col :span="6">
					<el-date-picker
					  v-model="value1"
					  type="daterange"
					start-placeholder="申请开始日期"
					end-placeholder="申请结束日期"
					  value-format="yyyy-MM-dd"
					  @change="changeDate">
					</el-date-picker>
				</el-col>
				<el-col :span="6">
					<el-date-picker
					  v-model="value2"
					  type="daterange"
					start-placeholder="放款开始日期"
					end-placeholder="放款结束日期"
					  value-format="yyyy-MM-dd"
					  @change="changeDate2">
					</el-date-picker>
				</el-col>
				
				<!-- <el-button type="primary">导出</el-button> -->
			</el-row>
			<el-row :gutter="20" style="margin-top: 10px;">
				<el-col :span="3">
					<el-select v-model="seachlist.auditStatus" placeholder="请选择借款状态">
						<el-option
						  v-for="item in options"
						  :key="item.value"
						  :label="item.label"
						  :value="item.value">
						</el-option>
				  </el-select>
				</el-col>
				<!-- <el-col :span="3">
					<el-select v-model="seachlist.channelCode" placeholder="请选择放款资方">
						<el-option
						  v-for="item in channelCodelist"
						  :key="item.value"
						  :label="item.label"
						  :value="item.value">
						</el-option>
				  </el-select>
				</el-col> -->
				<el-col :span="3">
					<el-select v-model="seachlist.loanStatus" placeholder="请选择还款状态">
						<el-option
						  v-for="item in loanStatuslist"
						  :key="item.value"
						  :label="item.label"
						  :value="item.value">
						</el-option>
				  </el-select>
				</el-col>
				<el-col :span="6">
					<el-button type="primary" @click="search">搜索</el-button>
					<el-button @click="clear">清空</el-button>
				</el-col>
			</el-row>	
			<el-table :data="listData" border stripe>
				<el-table-column label="借据号" prop="loanNo"></el-table-column>
				<el-table-column label="借款用户"  min-width='100px'>
					<template slot-scope="scope">
						<span style="color: #0066CC;" @click="toUser(scope.row.phone)">{{scope.row.phone}}</span>
					</template>
				</el-table-column>
				<el-table-column label="借款金额" prop="amount">
					<template slot-scope="scope">
						<span>{{scope.row.amount|NumFormat}}</span>
					</template>
				</el-table-column>
				<el-table-column label="交易状态">
					<template slot-scope="scope">
						<span v-if="scope.row.auditStatus == 'G3'">成功</span>
						<span v-if="scope.row.auditStatus == 'G2'">处理中</span>
						<span v-if="scope.row.auditStatus == 'G4'">失败</span>
					</template>
				</el-table-column>
				<el-table-column label="交易属性" prop="transactionStatus"></el-table-column>
				<el-table-column label="借款发起时间" prop="applyTime"></el-table-column>
				<el-table-column label="借款发放日" prop="grantTime"></el-table-column>
				<el-table-column label="借款到期日" prop="loanDeadlineTime"></el-table-column>
				<el-table-column label="期数" prop="loanDeadline"></el-table-column>
				<el-table-column label="还款状态" prop="repaymentStatus">
					<template slot-scope="scope">
						<span v-if="scope.row.repaymentStatus == '20'">逾期</span>
						<span v-else>{{scope.row.repaymentStatus}}</span>
					</template>
				</el-table-column>
				<!-- <el-table-column label="放款资方" prop="channelCode">
					<template slot-scope="scope">
						<span v-if="scope.row.channelCode == 'xiaoy'">小赢</span>
						<span v-else-if="scope.row.channelCode == 'judd'">桔多多</span>
						<span v-else-if="scope.row.channelCode == 'baixin'">百信</span>
						<span v-else>{{scope.row.repaymentStatus}}</span>
					</template>
				</el-table-column> -->
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button @click="showLoanDialog(scope.row.loanNo)" type="primary" size="mini">查看</el-button>
					</template>
				</el-table-column>
			</el-table>
			
			<!-- 分页 -->
			<el-pagination
			  @size-change="handleSizeChange"
			  @current-change="handleCurrentChange"
			  :current-page="pageNum"
			  :page-size="pageSize"
			  layout="total, sizes, prev, pager, next, jumper"
			  :total="total">
			</el-pagination>
			
			<div style="text-align: right;font-size: 16px;margin-top: 0.625rem;">总金额：{{totalLoanAmount|NumFormat}}元</div>
			<!-- 查看详情弹窗 -->
			<el-dialog
			  title="用户详情信息"
			  :visible.sync="LoanDialogVisible"
			  width="80%"
			  class="userDialog">
				<el-tabs v-model="activeName" @tab-click="handleClick">
				    <el-tab-pane label="借款详情" name="first">
						<el-form ref="LoanFormRef" :model="LoanForm" label-width="110px">
							<el-form-item label="借款金额">
								<el-input v-model="LoanForm.amount" disabled></el-input>
							</el-form-item>
							<el-form-item label="收款账户">
								<el-input v-model="LoanForm.grantBank" disabled></el-input>
							</el-form-item>
							
							<el-form-item label="年利率">
								<el-input v-model="LoanForm.loanRate" disabled></el-input>
							</el-form-item>
							<el-form-item label="贷款发放日">
								<el-input v-model="LoanForm.rateTime" disabled></el-input>
							</el-form-item>
							<el-form-item label="贷款起息日">
								<el-input v-model="LoanForm.grantTime" disabled></el-input>
							</el-form-item>
							<el-form-item label="贷款到期日">
								<el-input v-model="LoanForm.endTime" disabled></el-input>
							</el-form-item>
							<el-form-item label="还款日">
								<el-input v-model="LoanForm.repayDay" disabled></el-input>
							</el-form-item>
							<el-form-item label="借款期限">
								<el-input v-model="LoanForm.loanDeadline" disabled></el-input>
							</el-form-item>
							<el-form-item label="借款用途">
								<el-input v-model="LoanForm.loanPurpose" disabled></el-input>
							</el-form-item>
							<el-form-item label="还款方式">
								<el-input v-model="LoanForm.repayMethod" disabled></el-input>
							</el-form-item>
							<el-form-item label="借款人">
								<el-input v-model="LoanForm.user" disabled></el-input>
							</el-form-item>
							<!-- <el-form-item label="贷款发放人">
								<el-input v-if="LoanForm.grantCode == 'xiaoy'" value="小赢"></el-input>
								<el-input v-else-if="LoanForm.grantCode == 'judd'" value="桔多多"></el-input>
								<el-input v-else-if="LoanForm.grantCode == 'baixin'" value="百信"></el-input>
							</el-form-item> -->
						</el-form>
					</el-tab-pane>
				    <el-tab-pane label="还款记录" name="second">
						<el-table :data="recordJson" border stripe>
							<el-table-column label="还款金额" prop="amount"></el-table-column>
							<el-table-column label="还款时间" prop="repayTime"></el-table-column>
							<el-table-column label="还款状态">
								<template slot-scope="scope">
									<span v-if="scope.row.repayStatus == 'R3'">成功</span>
									<span v-if="scope.row.repayStatus == 'R2'">处理中</span>
									<span v-if="scope.row.repayStatus == 'R4'">失败</span>
								</template>
							</el-table-column>
						</el-table>
					</el-tab-pane>
				 </el-tabs>
			  <span slot="footer" class="dialog-footer">
			    <el-button type="primary" @click="LoanDialogVisible = false">关闭</el-button>
			  </span>
			</el-dialog>
		</el-card>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				custId:'',
				listData:[],/* 借款列表 */
				pageSize:20,/* 每页几条 */
				pageNum:1,/* 当前为哪页 */
				total:0,/* 总页数 */
				LoanDialogVisible:false,/* 借款详情弹窗开启状态 */
				activeName: 'first',/* 借款详情选项卡状态 */
				options: [{
				  value: '',
				  label: '请选择交易状态'
				},{
				  value: 'G3',
				  label: '借款成功'
				}, {
				  value: 'G2',
				  label: '处理中'
				},
				{
				  value: 'G4',
				  label: '借款失败'
				}],/* 选择查询的借款状态 */
				channelCodelist: [{
				  value: '',
				  label: '请选择放款资方'
				},{
				  value: 'judd',
				  label: '桔多多'
				}, {
				  value: 'baixin',
				  label: '百信'
				},
				{
				  value: 'xiaoy',
				  label: '小赢'
				}],/* 放款资方 */
				loanStatuslist: [{
				  value: '',
				  label: '请选择还款状态'
				},{
				  value: '10',
				  label: '正常'
				}, {
				  value: '11',
				  label: '结清'
				},
				{
				  value: '20',
				  label: '逾期'
				}],/*  还款状态 */
				value1:'',/* 选择查询日期*/
				value2:'',/* 选择放款查询日期*/
				seachlist:{'phone':'','custId':'','loanNo':'','auditStatus':'','channelCode':'','loanStatus':'','startTime':'','endTime':'','grantEndTime':'','grantStartTime':''},/* 查询列表 */
				LoanForm:{
					amount: "",
					grantBank: "",
					loanRate: "",
					rateTime: "",
					grantTime: "",
					endTime: "",
					repayDay: "",
					loanDeadline: "",
					loanPurpose: "",
					repayMethod: "",
					repayBank: "",
					user: "",
					grantCode: "",
				},/* 借款详情 */
				recordJson:[],/*, 还款详情 */
				totalLoanAmount:'',/* 总金额 */
			}
		},
		filters:{
			NumFormat(value){
				if(!value) return '0.00';
				  	/*原来用的是Number(value).toFixed(0)，这样取整时有问题，例如0.51取整之后为1，感谢Nils指正*/
				  	var intPart =  Number(value)|0; //获取整数部分
				  	var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'); //将整数部分逢三一断
				  	var floatPart = ".00"; //预定义小数部分
				  	// console.log(888,value)
				 	 // console.log(888,typeof(value))
				 	 var value2Array = value.toString().split(".");
				  	 var isNegtiveNo = ''
				 	 if(intPartFormat == 0){
				   		if(value.toString().indexOf('-') != 1) isNegtiveNo = '-' //修复小于0负数丢失的问题
				  	}
				 	 //=2表示数据有小数位
				 	if(value2Array.length == 2) {
				   		 floatPart = value2Array[1].toString(); //拿到小数部分
				   		 if(floatPart.length == 1) { //补0,实际上用不着
				      		return isNegtiveNo + intPartFormat + "." + floatPart + '0';
				    	} else {
				    		  return isNegtiveNo + intPartFormat + "." + floatPart;
				   		 }
				 	} else {
				   		return isNegtiveNo + intPartFormat + floatPart;
					}
			}
		},
		created() {
			this.seachlist.custId = this.$route.query.custId
			this.custId = this.$route.query.custId
			this.getList()
		},
		methods:{
			clear(){/* 清空查询条件 */
				this.custId=''
				this.seachlist={'phone':'','custId':'','loanNo':'','auditStatus':'','channelCode':'','loanStatus':'','startTime':'','endTime':'','grantEndTime':'','grantStartTime':''}
			},
			async getList(){/* 获取借款列表 */
				const loading = this.$loading({
				  lock: true,
				  text: 'Loading',
				  spinner: 'el-icon-loading',
				  background: 'rgba(0, 0, 0, 0.7)'
				});
				 const {data:res} = await this.$http.post('/loan/findLoanList',{custId:this.seachlist.custId,pageSize:this.pageSize,pageNum:this.pageNum,phone:this.seachlist.phone,loanNo:this.seachlist.loanNo,auditStatus:this.seachlist.auditStatus,channelCode:this.seachlist.channelCode,loanStatus:this.seachlist.loanStatus,startTime:this.seachlist.startTime,endTime:this.seachlist.endTime,grantStartTime:this.seachlist.grantStartTime,grantEndTime:this.seachlist.grantEndTime})
				 console.log(res)
				 setTimeout(() => {
				   loading.close();
				 }, 500);
				 // console.log(res);
				 this.listData = res.data.custLoanList
				 this.total = res.data.total
				 this.totalLoanAmount = res.data.totalLoanAmount
				 
				 this.listData.forEach((item,index)=>{
					 for(let k in item){
					 	if(item[k]==''){
					 		item[k]='—'
					 	}
					 }
				 })
				 
				
			},
			search(){/* 查询 */
				if((/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.custId))) {
					this.seachlist.phone=this.custId
					this.seachlist.custId=''
				}else if(/\C/.test(this.custId)){
					this.seachlist.custId=this.custId
					this.seachlist.phone=''
				}else{
					this.seachlist.phone = ''
					this.seachlist.custId = ''
				} 
				this.getList()
			},
			changeDate(e){/* 修改日期 */
				if(e == null){
					this.seachlist.startTime = ''
					this.seachlist.endTime = ''
				}else{
					this.seachlist.startTime = e[0]
					this.seachlist.endTime = e[1]
				}
				
			},
			changeDate2(e){/* 修改日期 */
				if(e == null){
					this.seachlist.grantStartTime = ''
					this.seachlist.grantEndTime = ''
				}else{
					this.seachlist.grantStartTime = e[0]
					this.seachlist.grantEndTime = e[1]
				}
				
			},
			handleSizeChange(val){
				// console.log(`每页 ${val} 条`);
				this.pageSize = val
				this.getList()
			},
			handleCurrentChange(val){
				// console.log(`当前页: ${val}`);
				this.pageNum = val
				this.getList()
			},
			async showLoanDialog(loanNo){/* 获取详细借款还款 */
				const loading = this.$loading({
				  lock: true,
				  text: 'Loading',
				  spinner: 'el-icon-loading',
				  background: 'rgba(0, 0, 0, 0.7)'
				});
				const {data:res} = await this.$http.post('/loan/detailsByLoanNo',{'loanNo':loanNo})
				console.log(res)
				setTimeout(() => {
				  loading.close();
				}, 500);
				if(res.code != 200){
					return this.$message.error(res.msg)
				}
				this.LoanDialogVisible = true
				this.LoanForm = res.data.loanJson
				for(let k in this.LoanForm){
					if(this.LoanForm[k]==''){
						this.LoanForm[k]='—'
					}
				}
				this.recordJson = res.data.recordJson.recordArray
				// console.log(this.userForm);
				
			},
			handleClick(tab, event) {
				console.log(this.activeName);
			 },
			 toUser(phone){
			 	this.$router.push({path:'/user', query:{'phone': phone}})
			 }
		}
	}
</script>

<style lang="less" scoped>
	.el-date-editor{
		margin-right: 10px;
	}
	.el-range-editor.el-input__inner{
		width: 100%;
	}
</style>
